<template>
  <div class="article_box">
    <span @click="guanli">文章管理</span>
    <span @click="shenhe">文章审核</span>
    <ul>
      <li v-for="(items, index) of $store.state.adminArticle.result" :key="items.id">
        <span>用户名：{{items.username}}</span>
        <span>用户昵称：{{items.nickname}}</span>
        <span>标题：{{items.title}}</span>
        <span>标签：{{items.tags}}</span>
        <span>类：{{items.categoryDTO.name}}</span>
        <span>阅读量：{{items.viewSize}}</span>
        <span>评论量：{{items.commentSize}}</span>
        <span>赞：{{items.zanSize}}</span>
        <span>发布时间：{{items.updateTime}}</span>
        <input
          type="button"
          value="删除"
          :one = "index"
          @click="drop"
          :id="items.id"
          v-if="tf === 1"
        />
        <input
          :id="items.id"
          type="button"
          value="通过"
          :one = "index"
          @click="checks"
          v-if="tf === 2"
        />
      </li>
    </ul>
    <article-page></article-page>
  </div>
</template>

<script>
// import { mapState } from 'vuex'
import ArticlePage from './components/articlePage'
import { allArticle, checkArticle } from 'com/shuju'
export default {
  name: 'AdminArticle',
  components: {
    ArticlePage
  },
  data () {
    return {
      tf: 1
    }
  },
  methods: {
    drop () { // 删除
      var id = event.target.getAttribute('id')
      var data = new FormData()
      data.set('postStatus', 'delete')
      checkArticle(id, data, this)
    },
    checks () { // 通过审核
      var id = event.target.getAttribute('id')
      var data = new FormData()
      data.set('postStatus', 'check')
      checkArticle(id, data, this)
    },
    guanli () {
      var data = new FormData()
      data.set('page', 0)
      data.set('size', 8)
      this.tf = 1
      allArticle(data, this)
    },
    shenhe () {
      this.tf = 2
      var data = new FormData()
      data.set('page', 0)
      data.set('size', 8)
      data.set('keywords', 'check')
      allArticle(data, this)
    }
  },
  mounted () {
    var data = new FormData()
    data.set('page', 0)
    data.set('size', 8)
    allArticle(data, this)
  }
}
</script>

<style lang="stylus" scoped>
  .article_box{
    float: left
    margin-top: 50px
    background-color: yellow
    width: calc(100% - 254px)
    height: 700px
    span{
      cursor: default
      display: inline-block
      margin-top: 20px
      margin-left: 20px
    }
    span:nth-child(1){
      cursor: pointer
    }
    span:nth-child(2){
      cursor: pointer
    }
    ul{
      padding: 0
      margin: 0
      margin-top: 20px
      width: 100%
      height: 100%
      list-style: none
      li{
        width: 100%
        height: 60px
        span{
          margin-left: .4rem
        }
      }
    }
  }
</style>
